<script setup>
import { ElIcon ,ElMessageBox,ElMessage} from 'element-plus'

const logout = () => {
  ElMessageBox.confirm(
      '确定要退出登录吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    // 用户点击确定，执行退出操作
    localStorage.removeItem('token')
    localStorage.removeItem('username')
    localStorage.removeItem('userId')
    localStorage.removeItem('role')
    localStorage.removeItem('expirationTime')
    localStorage.removeItem('isLoggedIn')
    ElMessage.success('退出成功')
    window.location.href = '/login'

  }).catch(() => {
    // 用户点击取消，不执行任何操作
    console.log('取消退出')
    ElMessage.info('取消退出')
  })
}
</script>

<template>
  <nav class="navbar">
    <div class="nav-items">
      <div class="brand">三江译舟
        <span class="small-text" >ꓠ ꓫꓹ ꓕꓳꓽ ꓶꓽ ꓡꓲ ꓢꓴ ꓥꓳꓽ ꓧꓶꓽ ꓥꓳꓽ ꓒꓳꓹ ꓔꓶ</span>
      </div>
      <div class="nav-links">
        <router-link to="/home">
          <el-icon><House /></el-icon> 首页
        </router-link>
        <router-link to="/lisu-medicine">
          <el-icon><FirstAidKit /></el-icon> 医学知识
        </router-link>
        <router-link to="/feedback">
          <el-icon><ChatDotRound /></el-icon> 用户反馈
        </router-link>
        <router-link to="/about-us">
          <el-icon><Help /></el-icon> 关于我们
        </router-link>
      </div>
      <el-button type="success" round @click="logout">退出登录</el-button>
    </div>
  </nav>
</template>

<style scoped>
  @import '@/assets/base.css';
</style>